<template>
    <div>
        
        <div class="saleMenTop">
            <label for="">条件查询</label>
            <el-input
                placeholder="订单流水号"
                v-model.lazy="mySearchInput"
                clearable
            >
            </el-input>
            <el-button type="primary" @click="clickSearchOrders" 
            style="backgroundColor:#009688;height:40px;width:80px;margin-top:4px;
            ">查询</el-button>
            <!-- <router-link to="/adminsSystem/addAccounts">
                <el-button type="success text">新增</el-button></router-link
            > -->
        </div>
        <div class="companyContent">
            <!--  -->
            <el-table :data="ordersData" stripe border style="width: 100%">
                <el-table-column
                    fixed
                    prop="_id"
                    label="_id"
                    width="250"
                >
                </el-table-column>
                <el-table-column
                    fixed
                    prop="customersId.name"
                    label="客户姓名"
                    width="150"
                >
                </el-table-column>
                 <el-table-column
                    fixed
                    prop="flowNum"
                    label="订单流水"
                    width="150"
                >
                </el-table-column>
                <el-table-column
                    prop="customersId.age"
                    label="客户年龄"
                    width="120"
                >
                </el-table-column>
                <el-table-column
                    prop="productsId.classesId.classes"
                    label="保险类别"
                    width="120"
                >
                </el-table-column>
                <el-table-column
                    prop="productsId.name"
                    label="产品"
                    width="120"
                >
                </el-table-column>
                <el-table-column
                    prop="productsId.price"
                    label="价格"
                    width="120"
                >
                </el-table-column>
                <el-table-column
                
                    label="订单状态"
                    width="120"
                >
                <template slot-scope="scope">
                    <span v-if="scope.row.state==1">未支付</span>
                    <span v-if="scope.row.state==2">已支付</span>
                    <span v-if="scope.row.state==3">待支付</span>
                </template>
                </el-table-column>
                <el-table-column
                    prop="dealTime"
                    label="提交时间"
                    width="120"
                >
                </el-table-column>
                <el-table-column
                    prop="saleMenId.name"
                    label="所属销售"
                    width="120"
                >
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" style="color:#009688;" @click="lookOrders(scope.row._id)">查看详情</el-button>
                        <!-- <el-button
                            type="text"
                            size="small"
                            @click="delClick(scope.row._id)"
                            style="color:#009688;"
                            >删除</el-button
                        > -->
                    </template>
                </el-table-column>
            </el-table>
            <!--  -->
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
    "orders"
);
// const { mapState:adminsMapState } = createNamespacedHelpers(
//     "admins"
// );

export default {
    data() {
        return {
            // ordersData:[
            //   {'_id':1,'customersName':'杨东林','customersAge':21,state:1,dealTime:'2021/2/28/18:26','classes':'车险',products:'阳光车险',price:'150',saleMen:'陈维'},
            //   {'_id':2,'customersName':'杨东林','customersAge':21,state:2,dealTime:'2021/2/28/18:27','classes':'车险',products:'阳光车险',price:'150',saleMen:'陈维'},
            //   {'_id':3,'customersName':'杨东林','customersAge':21,state:3,dealTime:'2021/2/28/18:28','classes':'车险',products:'阳光车险',price:'150',saleMen:'陈维'},
            // ]
        };
    },
    mounted() {
 this.getOrders();
    },
    computed: {
        ...mapState(["ordersData", "searchValue"]), //  获取state的数据，state相当于data(){}
        mySearchInput: {
            get() {
                return this.searchValue;
            },
            set(val) {
                this.setSearchValue(val);
            },
        },
    },
    methods: {
        ...mapMutations(["setSearchValue"]),
        ...mapActions(["getOrders",'getOrdersByOrdersId']),
        clickSearchOrders(){
            // 当点击查询按钮，调用获取对公信息，并把输入框的值传到后端
            this.getOrders();

        },
        lookOrders(_id){
            // 传送该订单的id
            // console.log({_id});
            this.getOrdersByOrdersId({_id})
            // 获取个人订单详情
            this.$router.push('/adminsSystem/mOrders/mOneOrdersDetails')
        }
    },
};
</script>

<style scoped lang="scss">
.companyContent {
    margin-top: 15px;
//     .el-button{
//       padding: 0px;
// }
}

.saleMenTop {
    display: flex;
}
.saleMenTop > label,
.el-input {
    line-height: 40px;
    margin-right: 10px;
}

.saleMenTop .el-input {
    width: 250px;
}

</style>